<template>
  <view class="package_sale">
    <view>新增车友</view>
    <view class="charts-box">
      <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
    </view>
    <view class="center" style="justify-content:center;margin-top:20rpx;font-size: 24rpx;">
     <view v-for="(item,index) in newFriend.add_user_statistics" :key="index"
       :style="{margin:item.name==='week'?'0px 15rpx':''}">
       {{item.name==='today'?'今日':item.name==='week'?'本周':item.name==='month'?'本月':''}}：{{item.value}}人
     </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const props = defineProps({
    newFriend: {
      type: Object
    },
  });
  const chartData = ref()
  const opts = {
    legend: {
      show: false
    }
  }
  getServerData()
  function getServerData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: JSON.parse(props.newFriend.days),
        series: [
          {
            name: "新增车友",
            data: JSON.parse(props.newFriend.add_user_data)
          }
        ]
      };
      chartData.value = JSON.parse(JSON.stringify(res));
    }, 500);
  }
</script>

<style scoped lang="less">
</style>